<template>
  <div>
    <!-- 假设这是你原来的模板内容 -->
    <el-dialog :visible="isDialogVisible">
      <el-card class="detail-card">
        <el-descriptions
          direction="vertical"
          :column="2"
          border
          class="detail-content"
        >
          <el-descriptions-item label="ID" label-class-name="label-class">{{user.id}}</el-descriptions-item>
          <el-descriptions-item label="用户名称" label-class-name="label-class">{{user.yhm}}</el-descriptions-item>
          <el-descriptions-item label="手机号" label-class-name="label-class">{{user.sjh}}</el-descriptions-item>
          <el-descriptions-item label="年龄" label-class-name="label-class">{{user.age}}</el-descriptions-item>
          <el-descriptions-item label="性别" label-class-name="label-class">{{user.sex === '1' ? '男' : '女'}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <template #footer>
        <el-button @click="isDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义 isDialogVisible
const isDialogVisible = ref(false);

// 表单数据
const user = ref({
    id: '',
    yhm: '',  // 改为后端实体类的属性名
    sjh: '',  // 改为后端实体类的属性名
    age: '',
    sex: '1'  // 改为后端实体类的属性名和类型
});

// 接收父组件传递过来的 用户 数据
const handleDetailData = (obj) => {
    isDialogVisible.value = true;
    user.value = {...obj};
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>